<template>
	<div class="activeSelect">
		<div class="select1">
			<h3>基础用例</h3>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label"></el-option>
			</el-select>
		</div>
		<div class="select2">
			<h3>有禁用选项</h3>
			<el-select v-model="value2" placeholder="请选择">
				<el-option v-for="item2 in options2" :disabled="item2.disabled" :key="item2.value" :value="item2.value" :label="item2.label"></el-option>
			</el-select>
		</div>
		<div class="select3">
			<h3>可清空单选</h3>
			<el-select v-model="value3" clearable placeholder="请选择">
				<el-option v-for="item3 in options2" :key="item3.value" :value="item3.value" :label="item3.label"></el-option>
			</el-select>
		</div>
		<div class="select4">
			<h3>基础多选-multiple(collapse-tags属性将它们合并为一段文字)</h3>
			<el-row>
				<el-col :span="12">
					<el-select v-model="value4" multiple clearable placeholder="请选择">
						<el-option v-for="item4 in options2" :key="item4.value" :value="item4.value" :label="item4.label"></el-option>
					</el-select>
				</el-col>
				<el-col :span="12">
					<el-select v-model="value5" multiple clearable collapse-tags placeholder="请选择">
						<el-option v-for="item5 in options2" :key="item5.value" :value="item5.value" :label="item5.label"></el-option>
					</el-select>
				</el-col>
			</el-row>
		</div>
		<div class="select5">
			<h3>自定义模板</h3>
			<el-select v-model="value6" clearable placeholder="请选择">
				<el-option v-for="item6 in cities" :key="item6.value" :value="item6.value" :label="item6.label">
					<span style="float:left">{{ item6.label }}</span>
					<span style="float: right; color: #8492a6; font-size: 13px">{{ item6.value }}</span>
				</el-option>
			</el-select>
		</div>
		<div class="select6">
			<h3>分组</h3>
			<el-select v-model="value7" placeholder="请选择">
				<el-option-group v-for="group in options3" :key="group.label" :label="group.label">
					<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-option-group>
			</el-select>
		</div>
		<div class="select7">
			<h3>搜索</h3>
			<el-select v-model="value8" filterable placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value2: '',
				value3: '',
				value4: [],
				value5: [],
				value6: '',
				value7: '',
				value8:'',
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				options2: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎',
					disabled: true
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				cities: [{
					value: 'Beijing',
					label: '北京'
				}, {
					value: 'Shanghai',
					label: '上海'
				}, {
					value: 'Nanjing',
					label: '南京'
				}, {
					value: 'Chengdu',
					label: '成都'
				}, {
					value: 'Shenzhen',
					label: '深圳'
				}, {
					value: 'Guangzhou',
					label: '广州'
				}],
				options3: [{
					label: '热门城市',
					options: [{
						value: 'Shanghai',
						label: '上海'
					}, {
						value: 'Beijing',
						label: '北京'
					}]
				}, {
					label: '城市名',
					options: [{
						value: 'Chengdu',
						label: '成都'
					}, {
						value: 'Shenzhen',
						label: '深圳'
					}, {
						value: 'Guangzhou',
						label: '广州'
					}, {
						value: 'Dalian',
						label: '大连'
					}]
				}],
			}
		}
	}
</script>

<style>

</style>